<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>选择器的优先级</title>
		<style>
			
			#ball {
				width: 200px;
				height: 200px;
				background-color: red;
			}

			.box {
				background-color: yellow !important;
				border: 10px solid blue;
			}

			#ball {
				background-color: pink !important;
			}

			.a>span {
				/*color: red;*/
			}

			.a span {
				color: red;
			}

		</style>
	</head>
	<body>

		<!-- 
			选择器的优先级
			!important 优先级非常大, 一旦设置, 不好更改(慎用)
			行内样式 1000
			ID选择器 100
			类选择器, 属性选择器, 伪类选择器 10
			元素选择器, 伪元素选择器 1
			* 选择器优先级最低

		 -->

		<div class="box" id="ball" style="background-color: black;"></div>





		<!-- 
			div  1
			span  1
			div>span 1 + 1 = 2
			.box  10
			.box span 10 + 1 = 11
			div.box>span 1 + 10 + 1 = 12
			p, div 1, 1
		 -->

		 <div class="a">
		 	<span>我是div的大儿子</span>
		 	<span>我是div的二儿子</span>
		 	<p>
		 		<span>我是div的大孙子</span>
		 		<span>其实呢我是p的二儿子, 也是div的二孙子</span>
		 	</p>
		 </div>
		
	</body>
</html>